import { Modal, Button, App, Form, Input, Space } from 'antd'
import { useModel } from '@umijs/max'
import { useState, useEffect } from 'react'
const { TextArea } = Input
import UploadImgList from '@/components/UploadImgList'
import './PaymentDetails.less'

const PaymentDetails = ({ setIsModalOpen, isModalOpen, currentDetailsObj, tableRef }) => {
  const { RewardPayment } = useModel('Agent')
  const { modal, message } = App.useApp()
  const [voucherForm] = Form.useForm()

  const [formInitValue, setFormInitValue] = useState({})

  // 查看详情
  const [isCheckDetails, setIsCheckDetails] = useState(true)

  const handleCancel = () => {
    setIsModalOpen(false)
  }

  useEffect(() => {
    if (isModalOpen) {
      setFormInitValue({
        voucher_img: currentDetailsObj.voucher_img,
        remark: currentDetailsObj.remark
      })
    } else {
      setFormInitValue({})
      voucherForm.resetFields()
    }
  }, [isModalOpen])

  const normFile = e => {
    if (e && e.length) {
      let arr = []
      e.forEach(item => {
        if (item.value) {
          arr.push(item.value)
        } else {
          return []
        }
      })

      return arr
    } else {
      return []
    }
  }

  return (
    <Modal
      style={{ top: 20 }}
      destroyOnClose
      onCancel={handleCancel}
      className='settlement_details'
      title={'打款凭证详细'}
      open={isModalOpen}
      footer={[
        <Button key='close' onClick={handleCancel}>
          关闭
        </Button>
      ]}
    >
      <div className='settlement_info'>
        <div className='settlement_title'>打款信息</div>

        <div className='settlement_info_item'>
          <div className='settlement_info_item_label'>类型</div>
          <div className='settlement_info_item_value' style={{ color: '#165DFF' }}>
            {currentDetailsObj.type_desc}
          </div>
        </div>

        <div className='settlement_info_item'>
          <div className='settlement_info_item_label'>奖励金额（元）</div>
          <div className='settlement_info_item_value'>{currentDetailsObj.rewards_amount}</div>
        </div>

        <div className='settlement_info_item'>
          <div className='settlement_info_item_label'>状态</div>
          <div className='settlement_info_item_value'>
            <span className='settlement_info_item_status' style={{ background: currentDetailsObj.statusColor }} />
            <span>{currentDetailsObj.status_desc}</span>
          </div>
        </div>

        <div className='settlement_info_item'>
          <div className='settlement_info_item_label'>合伙人</div>
          <div className='settlement_info_item_value'>{currentDetailsObj.agent_name}</div>
        </div>

        <div className='settlement_info_item'>
          <div className='settlement_info_item_label'>账户类型</div>
          <div className='settlement_info_item_value'>{currentDetailsObj.account_type}</div>
        </div>

        <div className='settlement_info_item'>
          <div className='settlement_info_item_label'>操作人</div>
          <div className='settlement_info_item_value'>{currentDetailsObj.op_name}</div>
        </div>

        <div className='settlement_info_item'>
          <div className='settlement_info_item_label'>打款时间</div>
          <div className='settlement_info_item_value'>{currentDetailsObj.payment_date}</div>
        </div>

        <div className='settlement_info_item'>
          <div className='settlement_info_item_label'>流水号</div>
          <div className='settlement_info_item_value'>{currentDetailsObj.trade_no}</div>
        </div>
      </div>

      <Form preserve={false} form={voucherForm} name='voucherForm' layout='vertical' initialValues={formInitValue}>
        <Form.Item name='voucher_img' label='处理凭证(常为打款截图)' getValueFromEvent={normFile}>
          <UploadImgList isCheckDetails={isCheckDetails} />
        </Form.Item>

        <Form.Item name='remark' label='备注'>
          <TextArea disabled={isCheckDetails} rows={4} placeholder='暂无备注' allowClear />
        </Form.Item>
      </Form>
    </Modal>
  )
}
export default PaymentDetails
